import React, { lazy, Suspense } from "react";

import { Link, Route, Routes, Outlet } from "react-router-dom";

//import About from "./pages/About";
//import Home from "./pages/Home";

const About = lazy(()=>import("./pages/About"))
const Home = lazy(()=>import("./pages/Home"))

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="about" element={
            <Suspense fallback={<>Loading...</>}>
              <div>
              <About />
              </div>
            </Suspense>
          } />
          <Route path="home" element={
            <Suspense fallback={<>Loading...</>}>
              <div>
              <Home />
              </div>
            </Suspense>
          } />
        </Route>
      </Routes>
    </div>
  );
}

function Layout() {
  return (
    <div>
      <h2>Router</h2>
      <nav>
        <Link to="/about">About</Link>&nbsp;|&nbsp;
        <Link to="/home">Home</Link>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
}

export default App;
